<template>
  <!-- 卡位  出租的卡位 我管理的-->
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
      <el-form-item label="使用状态" prop="shiyongState">
        <el-select v-model="queryParams.shiyongState" placeholder="请选择使用状态" clearable>
          <el-option label="未使用" :value="1" />
          <el-option label="已使用" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="使用人" prop="zulinfangName">
        <el-input v-model="queryParams.zulinfangName" placeholder="请输入使用人名称" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="queryParams.tel" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="运营商" prop="carrierType">
        <el-select v-model="queryParams.carrierType" placeholder="请选择运营商" clearable>
          <el-option v-for="dict in carrierTypes" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="在线状态" prop="deviceStatus">
        <el-select v-model="queryParams.deviceStatus" placeholder="请选择在线状态" clearable>
          <el-option label="在线" :value="1" />
          <el-option label="离线" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="到期时间" prop="">
        <el-date-picker v-model="timer" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delRow()">批量移除</el-button>
        <el-button type="warning" icon="el-icon-timer" plain @click="daoqi()">批量到期</el-button>
      </el-form-item>

    </el-form>
    <!-- <div class="tip">到期时间仅做展示，系统不会自动取消出租，请关注到期的卡位，及时跟进续费或取消出租。</div> -->
    <div class="table_box">
      <el-table border ref="table" :data="tableData.records" style="width: 100%" stripe @selection-change="handleSelection">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="carrierType" label="运营商" width="120">
          <template slot-scope="scope">
            <template v-if="carrierTypes&&carrierTypes[1]">
              <span :key="scope.row.id" :style="{color:colors[scope.row.carrierType]}">
                {{carrierTypes[scope.row.carrierType].name}}
              </span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="手机号"></el-table-column>
        <el-table-column prop="" label="在线状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.deviceStatus==1" type="success">在线</el-tag>
            <el-tag v-if="scope.row.deviceStatus==2" type="danger">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="使用状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.zulinfangId" type="success">已使用</el-tag>
            <el-tag v-else type="danger">未使用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="zulinfangName" label="使用人"></el-table-column>
        <el-table-column prop="zulinTime" label="开始时间" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.zulinTime">
              {{ scope.row.zulinTime.substring(0, 10)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="expireTime" label="到期时间" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.expireTime">
              {{ scope.row.expireTime.substring(0, 10)}}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="chuzufangEnable" label="启用状态" width="80">
          <template slot-scope="scope">
            <el-switch size="small" v-model="scope.row.chuzufangEnable" :active-value="1" :inactive-value="2" @change="statusChange($event, scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="no" label="共享单号" width="200">

          <template slot-scope="scope">
            <span class="link" @click="openOrderDialog(scope.row.no)">
              {{ scope.row.no }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-button type="edit" @click="editRow(scope.row)">编辑</el-button> -->
            <el-button type="del" v-if="!scope.row.zulinfangId" @click="delRow(scope.row.id)">移除共享</el-button>
            <el-button type="edit" v-if="scope.row.zulinfangId" @click="daoqi(scope.row.id)">强制到期</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
    <!-- 共享订单弹窗 -->
    <shareOrderDialog ref="shareOrderDialog"></shareOrderDialog>
  </div>
</template>

<script>
import phoneApi from "@/api/phoneManage";
import shareOrderDialog from "../gongxiang/shareOrderDialog.vue";
export default {
  name: "",
  components: { shareOrderDialog },
  data() {
    return {
      colors: [
        "red",
        "green",
        "FFB52B",
        "#6c5dd2",
        "red",
        "green",
        "FFB52B",
        "#6c5dd2",
      ],
      timer: [],
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shiyongState: '',
        zulinfangName:'',
        tel:'',
        carrierType:'',
        deviceStatus:'',
      },
      ids: [],
      selects:[]
    };
  },
  created() {
    this.getList();
  },
  activated() {},
  computed: {
    carrierTypes() {
      return this.arrayToObject(this.$store.getters.gameYunyingshangList, "id");
    },
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.expireTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.expireTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.expireTimeStart = "";
        this.queryParams.expireTimeEnd = "";
      }
      phoneApi.telLeaseDetailslistmyChuZu(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
        // if (response.rows && response.rows.length) {
        //   this.rise = response.rows[0].rise;
        // }
      });
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 打开共享订单
    openOrderDialog(no) {
      this.$refs.shareOrderDialog.open({
        dataType: 1,
        no: no,
      });
    },
    // 启用 状态改变
    statusChange(e, item) {
      phoneApi
        .telLeaseDetailsEdit({
          id: item.id,
          chuzufangEnable: e,
        })
        .then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
    },
    // 表格选择项改变
    handleSelection(arr) {
      ////console.log("%c Line:442 🍆 表格选择改变", "color:#f5ce50", arr);
      this.selects = arr;
      this.ids = [];
      if (arr.length == 0) {
        this.ids = [];
      } else {
        arr.forEach((t) => {
          this.ids.push(t.id);
        });
      }
    },
    // 判断选择的数据是否为同一类
    checkSelectData(flag){
      let result = true
      if(this.selects&&this.selects.length){
        this.selects.forEach(r=>{
          if(flag=='yichu'){
            // 移除共享市场
            if(r.zulinfangId){
              result = false
            }
          }
          // else{
          //   // 强制到期
          //   if(!r.zulinfangId){
          //     result = false
          //   }
          // }
        })
      }else{
        return this.$message.error("请先选择数据！")
      }
      return result

    },
    // 批量删除
    // 删除 移除共享市场
    delRow(id) {
      let str = "";
      if (id) {
        str = id;
      } else {
        if(this.checkSelectData('yichu')){
          str = this.ids.join(",");
        }else{
          return this.$message.error("不能选择已使用的号码！")
        } 
      }
      this.$confirm(
        "该操作会将号码移除共享市场，无法恢复，确定移除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "",
        }
      )
        .then(() => {
          phoneApi.telLeaseDetailsDelNew({ ids: str }).then((res) => {
            this.$message.success(res.msg);
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 强制到期
    daoqi(id) {
      let str = "";
      if (id) {
        str = id;
      } else {
        if(this.checkSelectData('daoqi')){
          str = this.ids.join(",");
        }else{
          return this.$message.error("不能选择未使用的号码！")
        } 
      }
      this.$confirm(
        "该操作会将正在使用的号码强制到期，号码回归到共享市场，无法恢复，确定强制到期吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "",
        }
      )
        .then(() => {
          phoneApi.telLeaseDetailsqiangzhi({ ids: str }).then((res) => {
            this.$message.success(res.msg);
            this.getList();
          });
        })
        .catch(() => {});
    },
    //重置
    resetQuery() {
      this.timer = []; 
      this.resetForm("queryForm");
      this.search();
    },
  },
};
</script>
<style lang="scss" scoped>
.tip {
  color: red;
  margin-bottom: 5px;
}
</style>